<template>
  <hr class="bode-hr">
    <div class="tabs">
    <el-tabs v-model="activeName" type="border-card" @tab-click="tabClick" style="min-width: 550px;">
      <el-tab-pane label="前压机参数设定" name="Pre_Params">
        <!-- 更多table配置见文档：http://doc.volcore.xyz/table 或使用element plus原生table -->
        <vol-table  ref="Pre_Params" :loadKey="true" :columns="columns" :pagination-hide="true" :max-height="550"
                :defaultLoadPage="false" @loadBefore="loadBefore_Pre" :url="url" :column-index="true" :ck="false"
                :index="false"></vol-table>
      </el-tab-pane>
      <el-tab-pane label="中压机参数设定" name="Center_Params">
        <vol-table  ref="Center_Params" :loadKey="true" :columns="columns" :pagination-hide="true" :max-height="550"
                :defaultLoadPage="false" @loadBefore="loadBefore_Center" :url="url" :column-index="true" :ck="false"
                :index="false"></vol-table>
      </el-tab-pane>
      <el-tab-pane label="时间参数设定" name="Time_Params">
        <vol-table ref="Time_Params" :loadKey="true" :columns="columns" :pagination-hide="true" :max-height="550"
                :defaultLoadPage="false" @loadBefore="loadBefore_Time" :url="url" :column-index="true" :ck="false"
                :index="false"></vol-table>
      </el-tab-pane>
    </el-tabs>
    </div>  
</template>
<script>
import VolTable from "@/components/basic/VolTable.vue";
export default {
    components: {
        VolTable
    },
    methods: { 
        created(){
        },
        tabClick(params) {
         },
         loadBefore_Pre(params, callback,table, item) {//表格数据加载时触发
            params.wheres.push({
              name:"GroupName",
              value:'PrePressMachine_Param'
            });
            return callback(true);
        },
        loadBefore_Center(params, callback,table, item) {//表格数据加载时触发
            params.wheres.push({
              name:"GroupName",
              value:'CenterPressMachine_Param',
            });
            return callback(true);
        },
        loadBefore_Time(params, callback,table, item) {//表格数据加载时触发
            params.wheres.push({
              name:"GroupName",
              value:'Time_Param'
            });
            return callback(true);
        },
        gridRowClick(row) { //主表点击行加载明细表
          console.log(row);
            if (row!=null) {
                //load方法可参照voltable组件api文档
                console.log(row.FormulaSetId)
                this.$refs.Pre_Params.load({ value: row.FormulaSetId })
                this.$refs.Center_Params.load({ value: row.FormulaSetId })
                this.$refs.Time_Params.load({ value: row.FormulaSetId })
            }else{
              this.$refs.Pre_Params.load()
                this.$refs.Center_Params.load()
                this.$refs.Time_Params.load()
            }
        },
        destroyed(){
            //主表没有数据时，清空明细数据
          this.$refs.table.rowData.splice(0)
        },
    },
    data() {
        return {
            url: 'api/process_baseparams/GetParamsAllData',//指定从某个接口获取table数据
            activeName: "Pre_Params",
            columns: [{field:'Id',title:'Id',type:'int',width:110,hidden:true,readonly:true,require:true,align:'left'},
                       {field:'Name',title:'名称',type:'string',width:120,require:true,align:'left'},
                       {field:'relateDeivceCode',title:'设备名称',type:'string',width:120,hidden:true,align:'left'},
                       {field:'SetVal',title:'标准值',type:'decimal',width:110,require:true,precision:2,
                       edit: { type: "decimal",min:0,max:10000,keep:true },align:'left'},
                       {field:'Deviation',title:'误差范围',type:'decimal',width:110,require:true,precision:2,
                       edit: { type: "decimal",min:0,max:1000 },align:'left'},
                       {field:'Unit',title:'单位',type:'string',bind:{ key:'参数单位',data:[]},width:110,require:true,align:'left'},
                       {field:'GroupName',title:'分组',type:'string',bind:{ key:'配方分组',data:[]},width:110,require:true,align:'left'}]
                       
        }
    }
}
</script>
<style scoped>
.tabs {
  padding: 5px 15px ;
 padding-bottom: 15px;
 /**border-top: 1px solid  #be2424;**/
}
.bode-hr {
  width: 98%; /* 设置宽度 */
  border: none; /* 移除默认边框 */
  border-top: 1px solid #2057cf; /* 添加顶边框以创建横线 */
}
.tabs >>> .el-tabs {
  box-shadow: none;
}
.tabs >>> .el-tabs__content {
  padding: 0 !important;
  padding-bottom: 15px;
}
</style>
